<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发布公告 - 社区健康系统</title>
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 基础样式 */
        body { font-family: "Microsoft YaHei", Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f7fa; }
        .container { max-width: 800px; margin: 0 auto; padding: 20px; }

        /* 头部样式 */
        header { background-color: #007bff; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 24px; font-weight: bold; }
        .nav a { color: white; text-decoration: none; margin-left: 15px; padding: 8px 12px; border-radius: 4px; transition: background-color 0.3s; }
        .nav a:hover { background-color: rgba(255, 255, 255, 0.2); }

        /* 卡片样式 */
        .card { background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 20px; overflow: hidden; }
        .card-header { background-color: #007bff; color: white; padding: 15px 20px; font-size: 18px; font-weight: bold; }
        .card-body { padding: 20px; }

        /* 表单样式 */
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #495057; }
        .form-control { width: 100%; padding: 10px 15px; border: 1px solid #ced4da; border-radius: 4px; font-size: 16px; }
        .form-control:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
        .textarea-control { min-height: 200px; resize: vertical; }
        .btn { padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; }
        .btn-primary { background-color: #007bff; color: white; }
        .btn-primary:hover { background-color: #0069d9; }
        .btn-secondary { background-color: #6c757d; color: white; margin-left: 10px; }
        .btn-secondary:hover { background-color: #5a6268; }

        /* 提示信息 */
        .message { padding: 10px 15px; margin-bottom: 20px; border-radius: 4px; }
        .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
    </style>
</head>
<body>
<header>
    <div class="logo">社区健康系统</div>
    <div class="nav">
        <a href="AdminNotice">
            <i class="fas fa-bullhorn mr-1"></i>返回</a>
    </div>
</header>

<div class="container">
    <c:if test="${not empty error}">
        <div class="message error">${error}</div>
    </c:if>

    <div class="card">
        <div class="card-header">
            <i class="fas fa-pen mr-2"></i>发布新公告
        </div>
        <div class="card-body">
            <form action="Notice" method="post">
                <div class="form-group">
                    <label for="title">公告标题 <span style="color: red;">*</span></label>
                    <input type="text" id="title" name="title" class="form-control"
                           placeholder="请输入公告标题，不超过100字" required>
                </div>

                <div class="form-group">
                    <label for="content">公告内容 <span style="color: red;">*</span></label>
                    <textarea id="content" name="content" class="form-control textarea-control"
                              placeholder="请输入公告内容" required></textarea>
                </div>
                <div class="form-group" style="text-align: right;">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane mr-1"></i>发布公告
                    </button>
                    <a href="${pageContext.request.contextPath}/AdminNotice"
                       class="btn btn-secondary">
                        <i class="fas fa-times mr-1"></i>取消
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>